<template>
  <div class="integral-wrapper">
    <div class="top">
      <el-tabs v-model="activeName">
        <el-tab-pane label="积分规则" name="first" />
      </el-tabs>
    </div>
    <div class="middle">
      <div class="title">积分获取方式：</div>
      <el-form label-width="150px">
        <el-form-item label="注册：">
          <template>
            <div>
              <el-input
                v-model="form.register_point"
                placeholder="请输入积分"
                size="mini"
                style="width: 170px; vertical-align: middle"
              >
                <template slot="append">积分</template>
              </el-input>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="邀请好友注册：">
          <el-input v-model="form.invite_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
            <template slot="append">积分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="购物：">
          <div class="d-flex">
            <div class="mr-10">消费1元换</div>
            <el-input v-model="form.buy_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="ml-10">（积分比例可设置为小数，最多保留两位小数）</div>
          </div>
        </el-form-item>
        <el-form-item label="看视频：">
          <div class="d-flex">
            <div class="mr-10">看一次视频获</div>
            <el-input v-model="form.watch_video_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="mr-10 ml-10">每天观看最高获得</div>
            <el-input v-model="form.watch_video_max_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="ml-10">（0表示积分无上限）</div>
          </div>
        </el-form-item>
        <el-form-item label="看文章：">
          <div class="d-flex">
            <div class="mr-10">看一次文章获</div>
            <el-input v-model="form.watch_article_point " placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="mr-10 ml-10">每天观看最高获得</div>
            <el-input v-model="form.watch_article_max_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="ml-10">（0表示积分无上限）</div>
          </div>
        </el-form-item>
        <el-form-item label="开通会员：" v-if="getVipRule">
          <div class="d-flex">
            <!-- <div class="mr-10">消费一元换</div> -->
            <el-input v-model="form.become_vip_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="邀请好友成为会员：">
          <div class="d-flex">
            <!-- <div class="mr-10">消费一元换</div> -->
            <el-input v-model="form.invite_vip_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="分享商品：">
          <div class="d-flex">
            <!-- <div class="mr-10">消费一元换</div> -->
            <el-input v-model="form.share_goods_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="mr-10 ml-10">每天上限</div>
            <el-input v-model="form.share_goods_max_point" placeholder="请输入积分" size="mini" style="width: 170px; vertical-align: middle">
              <template slot="append">积分</template>
            </el-input>
            <div class="ml-10">（好友打开查看结算）</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveIntegral">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { setIntegralRules, getIntegralRules } from '@/api/integral-rule'
import { mapGetters } from 'vuex'
const ERR_OK = 200
export default {
  data() {
    return {
      activeName: 'first',
      form: {
        register_point: '',
        invite_point: '',
        buy_point: '',
        watch_video_point: '',
        watch_video_max_point: '',
        become_vip_point: '',
        invite_vip_point: '',
        share_goods_point: '',
        share_goods_max_point: '',
        watch_article_point: '',
        watch_article_max_point: ''
      }
    }
  },
  computed: {
    getVipRule() {
      return parseInt(localStorage.getItem('vip_rule'))
    },
    ...mapGetters(['vip_rule'])
  },
  created() {
    this._getIntegralRules()
  },
  methods: {
    saveIntegral() {
      this._setIntegralRules(this.form)
    },
    _setIntegralRules({ register_point, invite_point, buy_point, watch_video_point, watch_video_max_point, become_vip_point, invite_vip_point, share_goods_point, share_goods_max_point, watch_article_point, watch_article_max_point }) {
      setIntegralRules({ register_point, invite_point, buy_point, watch_video_point, watch_video_max_point, become_vip_point, invite_vip_point, share_goods_point, share_goods_max_point, watch_article_point, watch_article_max_point })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '设置成功',
              type: 'success',
              showClose: true
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getIntegralRules() {
      getIntegralRules()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            const integralObj = JSON.parse(res.data.integral_rule)
            this.form = integralObj
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scope>
@import '@/styles/el-button.scss';
.integral-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    padding: 10px 10px;
    box-sizing: border-box;
  }
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
.el-form {
  margin-top: 20px;
}
.el-form-item {
}
.d-flex{
  display: flex;
  align-items: center;
}
.mr-10{
  margin-right: 10px;
  white-space: nowrap;
}
.ml-10{
  margin-left: 10px;
}
</style>
